<template>
  <div>
    <el-form :inline="true" :model="data.editData" class="demo-form-inline">
      <el-form-item label="表名">
        <yu-select select :options="data.tableList" v-model:value="data.editData.tableName" @change="changeDataType(data.editData.tableName)" />
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="data.editData.showName" placeholder="名称"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="data.editData.remark"></el-input>
      </el-form-item>
    </el-form>

    <yu-table ref="yuTable" :tableData="data.tableData" :columns="data.tableData.columns">
      <template #tool>
        <div class="tool">
          <el-button @click="saveBtn">保存</el-button>
        </div>
      </template>
      <template v-slot:isShowStuts="{ scopeData }">
        <el-switch v-model="scopeData.row.isShow" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
      </template>
      <template v-slot:handleSlot="{ scopeData }">
        <el-button-group class="ml-4">
          <el-button text type="success" size="small" @click="up(scopeData.row, scopeData.row.rowIndex - 1)">上移 </el-button>
          <el-button text type="success" size="small" @click="down(scopeData.row, scopeData.row.rowIndex - 1)">下移 </el-button>
          <el-button text size="small" type="danger" @click="delRow(scopeData.row, scopeData.row.rowIndex - 1)">删除 </el-button>
        </el-button-group>
      </template>
    </yu-table>
  </div>
</template>

<script setup>
  import { ref, reactive, toRef, onBeforeMount, getCurrentInstance } from 'vue';
  let { proxy } = getCurrentInstance();
  const data = reactive({
    editData: {},
    tableData: { data: [], columns: [], tableArrts: {} },
    tableList: [],
  });
  const props = defineProps({
    editData: { type: Object, defult: {} },
    isShow: { type: Boolean, defult: false },
  });
  const emits = defineEmits(['update:isShow']);
  data.editData = toRef(props, 'editData');
  onBeforeMount(() => {
    getTable();
    //加载明细
    loadDetail();
  });
  const saveBtn = () => {
    var param = { sysTable: data.editData, sysTableDetail: data.tableData.data };
    proxy.$api.data.sysTableEdit(param).then(res => {
      if (res.code != -1) {
        proxy.$message({
          type: 'success',
          message: res.msg,
        });
        emits('update:isShow', false);
      } else {
        // 关闭对话框
        proxy.$message({
          type: 'error',
          message: res.msg,
        });
      }
    });
  };
  const getTable = async () => {
    data.tableList = await proxy.$api.data.getTableName();
  };
  const changeDataType = async val => {
    data.tableData.data = await proxy.$api.data.getTableColumnsByTable({ tableName: val });
  };
  const loadDetail = async () => {
    if (data.editData.tableId != null) {
      data.tableData.data = await proxy.$api.data.sysTableDetail(data.editData);
    }
  };
  data.tableData.columns = [
    { type: 'index' },
    { type: 'selection' },
    { title: '取值字段', key: 'itemField', align: 'left', edit: true },
    { title: '显示名称', key: 'titleShow', align: 'left', edit: true },
    { title: '字段类型', key: 'itemType', align: 'left', edit: false },
    { title: '数据转换', key: 'format', align: 'left', edit: true },
    { title: '是否显示', key: 'isShow', align: 'left', slot: 'isShowStuts', edit: false },
    {
      title: '操作',
      align: 'center',
      slot: 'handleSlot',
      width: 200,
    },
  ];
  const up = (row, index) => {
    if (index > 0) {
      data.tableData.data.splice(index, 1);
      data.tableData.data.splice(index - 1, 0, row);
    }
  };
  const down = (row, index) => {
    if (index < data.tableData.data.length - 1) {
      data.tableData.data.splice(index, 1);
      data.tableData.data.splice(index + 1, 0, row);
    }
  };
  const delRow = (row, index) => {
    data.tableData.data.splice(index, 1);
  };
</script>
<style lang="scss" scoped></style>
